<style scoped>

.inline{
    display: flex;
    align-items: center;
}

.menu{
    margin: auto;
}
.menu-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-header-tools{
    flex: 1 1;
    display: flex;
    align-items: center;
}

.menu-header-sub{
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 10%;
}

.header-tools-item{
    min-width: 130px;
}

.header-tools-item + .header-tools-item {
    margin-left: 13px;
}


.menu-table{
    margin: 20px auto ;
}

.page{
    margin-top: 20px
}


</style>
<template>
    <div class="menu">
        <div class="menu-header">
            <div class="menu-header-tools">
                <div class="header-tools-item">
                    <Button type='primary' icon='md-add' @click='onAddhandler' > 添加 </Button>
                </div>
                 <div class="header-tools-item">
                     <LSelect 
                     valueKey='id'
                     labelKey='name'
                     :options='orderList'
                     v-model="param.status"
                     placeholder="任务状态"
                     clearable  >
                     </LSelect>
                </div>
                 <div class="header-tools-item">
                     <LSelect 
                     valueKey='id'
                     labelKey='title'
                     :options='companyList'
                     v-model="param.insure_id"
                     placeholder="保险公司"
                     clearable>
                     </LSelect>
                </div>
                 <div class="header-tools-item">
                    <LSelect 
                     valueKey='id'
                     labelKey='title'
                     :label-in-value="true"
                     :options='carTeamList'
                     v-model="param.fleet_id"
                     placeholder="车队"
                     clearable  >
                     </LSelect>
                </div>
                <div class="header-tools-item">
                    <Input
                    v-model="param.user"
                    clearable
                    placeholder="用户"
                    />
                </div>
                <div class="header-tools-item">
                    <LockDatePicker
                        :startTime.sync='param.start_time'
                        :endTime.sync='param.end_time'
                        type="daterange"
                        size="default"
                        format="yyyy-MM-dd"
                        placement="bottom-end"
                        placeholder="选择日期"
                    ></LockDatePicker>
                </div>
                <div class="header-tools-item inline search">
                     <Input
                        clearable
                        v-model="param.keyword"
                        placeholder="订单号/车牌号" />
                  <Button type="primary" class="search" icon="ios-search" @click="onSearch">搜索</Button>
                </div>
            </div>
            <div class="menu-header-sub">
                <Button
                v-if="filterCheck('/export')"
                type="error"
                @click="onExport"
                >导出</Button>
            </div>
        </div>

        <div class="menu-table">

            <Table
                ref="table"
                border
                :columns="tableConf"
                :data="tableData"
            >
            <template slot-scope="{ row }" slot="action">
                <div class="inline">
                    <template v-for='item of tableBtnConf'>
                        <TableBtn 
                        class="menu-table-control"
                        :key='item.key'
                        v-if='tableBtnVisibal[item.key](row)'
                        @click='callbackConf[item.key](row)'
                        :icon='item.icon' >
                            {{ item.label }}
                        </TableBtn>
                    </template>
                </div>
            </template>
          </Table>
          <page
            class="page"
            ref="page"
            :total="total"
            :currentPage="param.page"
            :switchPageIndex="switchPageIndex"
            :switchPageSize="switchPageSize"
          ></page>
            
        </div>


        <!-- <addRescueTask
            :lookAttribute="showModel"
            :list="rowList4"
            @refreshData="getRescueHistoryList"
        ></addRescueTask> -->
        
    </div>
</template>
<script>
import Select from '@/components/select'
import LockDatePicker from '@/components/time'
import TableBtn from '../components/table-btn'
import {tableConf, tableBtnConf} from './model'
import { asyncFormat } from '@/utils'
import * as API from '../api'
import { exportJyTable } from '../utils'

// 模拟filter
const filter = () => true



export default {

    components:{ 
        LSelect: Select,
        LockDatePicker,
        TableBtn
    },  
    
    props:{
        orderList: {
            default(){return[]}
        },
        companyList: {
            default(){return[]}
        },
        carTeamList: {
            default(){return[]}
        },
    },

    data(){
        return{
            tableConf,
            tableBtnConf,
            showModel: false,
            tableData: [],
            total: 0,
            switchPageIndex: 1,
            switchPageSize: 10,
            param: {
                page: 1,
                pageSize: 10
            },
            
            // 模拟
            routerList: [],
            routerName: '/'   
        }
    },
    computed: {

        callbackConf(){

            const { onDetail, onEdit, onPlane, onCancel } = this
            const wrap = fn => row => fn(row) 
            
            return{
                detail: wrap(onDetail),
                edit: wrap(onEdit),
                plane: wrap(onPlane),
                cancel: wrap(onCancel),
            }
        },
        
        tableBtnVisibal(){
            
            const { filterCheck } = this
            return{
                detail: () => true,
                edit: () => filterCheck('edit'),
                plane: row => filterCheck('assign')&&[0, 120].includes(row.status),
                cancel: row => filterCheck('cancel')&&![122, 666, 133].includes(row.status),
            }
        }
        
    },
    methods: {

        filterCheck(path){
            return filter(this.routerList, `${this.routerName}/${path}`)
        },
        
        onAddhandler(){

        },
        onSearch(){
            console.log(this.param)
            this.loadTableData()
        },
        async onExport(){

            const success = await exportJyTable(
                {filename: "救援列表", columns:tableConf},
                this.param,
                this.$refs.table
            )
            
            console.log('export: ',success)

        },



        onDetail(){

        },
        onEdit(){

        },
        onPlane(){

        },
        onCancel(){

        },

        async loadTableData(){
            const { page, pageSize } = this.param
            const [res, err] = await asyncFormat(API.getRescueHistoryList(this.param))
            if(err){console.error(err); return}

            this.tableData = res.map(item => {
                console.log()
                return {
                    ...item,
                    _index: (page - 1)*pageSize + item.index + 1
                }
            })
        }

    },

    created() {
        this.loadTableData()
    },
}
</script>

